<template>
<view class="home-index">
	<!-- <uni-nav-bar v-if="Object.keys(tabValue).length==0" dark :fixed="true" title="首页" background-color="#55acee"/> -->
	<view v-if="Object.keys(tabValue).length>0" class="h-top">
		<view class="group-list">
			<text :class="{'active': tabActive==i}" v-for="(tab, i) in tabValue" :key="i" @click="changeGroup(i)">{{tab}}</text>
		</view>
	</view>
	
	<view class="search-btn" v-if="tabActive==1">
		<view class="search-box" :style="{width: currentClasInx!=-1 && pickerDate ==defaultPickerDate?'50%':'100%'}">
			<input type="text" :value="studentText" @input="searchInput" placeholder="搜索学生" />
			<view class="image" @click="searchStudent()">
				<image src="/static/search.png" mode="aspectFit"></image>
			</view>
			
		</view>
		<view class="sign-btn" v-if="currentClasInx!=-1 && pickerDate ==defaultPickerDate" @click="submitAbsence">
			<text>全部到场</text>
		</view>
	</view>
	<view class="data-home" v-if="tabActive==0">
		<view class="charts-box team-members">
			<view class="title">我的组员</view>
			<view class="students" v-if="exhibitionAll.students&&exhibitionAll.students.length>0">
				<view class="student" v-for="item in exhibitionAll.students" :key="item.id">
					<image class="avatar-url" :src="utils.headImage(item)" @click="utils.userDetails(item.accountId, item.userType)" mode="aspectFill"></image>
					<text class="name"><text :class="{'animation': item.name.length>6}">{{item.name}}</text></text>
					<text class="grade-cla">{{orgGraders[item.clasId]}}</text>
				</view>
			</view>
			<view v-else style="padding: 32rpx 0; text-align:center;">暂无数据</view>
		</view>
		<!-- <view class="charts-box cb-box1">
			<view class="title">任务提交情况</view>
			<view class="change-tab">
				<text :class="{active: activeI==i}" v-for="(item, i) in tabs" :key="i" @click="changeTab(i)">{{item}}</text>
			</view>
			<qiun-data-charts type="pie" :chartData="chartsDataPie" tooltipFormat="tooltipDemo1" :opts="opts"/>
		</view> -->
		<view class="charts-box" v-if="chartsDataLine.series.length>0">
			<view class="title">总积分情况</view>
			<qiun-data-charts type="line" :chartData="chartsDataLine"/>
		</view>
	</view>
	<view class="class-members" v-else-if="tabActive==1">
		<view class="xd-box-shadow">
			<view class="title">
				<view class="clas-grade">
					<uni-combox
						class="select-filter"
						:candidates="class_list"
						placeholder="请选择"
						:border="false"
						v-model="cur_option"
						@change="comboxChange"></uni-combox>
					<text v-if="search_result.length==0">到场情况</text>
				</view>
				<!-- <view class="clas-grade" v-else>
					<text>{{class_list[cur_class_id]}}</text>
				</view> -->
				<view class="time" v-if="search_result.length==0" @click="select_date=true">
					<text>{{pickerDate.split('-').join('.')}}</text>
					<image src="/static/user/rili.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="head">
				<text class="number">学号</text>
				<text class="name">姓名</text>
				<text class="score">积分</text>
				<!-- <text class="time">最近登录</text> -->
				<text class="is-login">是否到场</text>
			</view>
			<view v-if="search_result.length">
				<view class="class-item" v-for="(item, inx) in search_result" :key="inx">
					<text class="number">{{item.studentNo}}</text>
					<text class="name" v-html="item.name.split('·').join('·<br>')"></text>
					<text class="score">{{item.zScore}}</text>
					<text class="is-login" @click="editAbsence(item)">{{item.absence?'否':'是'}}</text>
				</view>
			</view>
			<view v-else>
				<view class="" v-for="(clas, k) in all_class" :key="k">
					<view v-if="k==cur_class_id">
						<view class="class-item" v-for="(stu, i) in clas.list" :key="i">
							<text class="number">{{stu.studentNo}}</text>
							<text class="name" v-html="stu.name.split('·').join('·<br>')"></text>
							<text class="score">{{stu.score}}</text>

							<text class="is-login" @click="editAbsence(stu)">{{stu.absence?'否':'是'}}</text>
						</view>
					</view>
				</view>
				<view class="page" v-if="cur_class_id!=-1&&all_class[cur_class_id]">
					<text :class="{active: pageI == i}" v-for="i of all_class[cur_class_id].totalPage" :key="i" @click="getStduents(cur_class_id, i)">{{i}}</text>
				</view>
			</view>
			
		</view>
	</view>
	<view class="grade-members" v-else-if="tabActive==2">
		<view class="xd-box-shadow ranking">
			<view class="title">
				班级积分排名
			</view>
			<view class="list">
				<view v-for="(cals, k) in schoolYearData" :key="k">
					<view class="icon zuo" @click="changeSchoolYear(0)" v-if="keyIndex>0">
						<uni-icons color="#7f7f7f" size="40rpx" type="back"></uni-icons>
					</view>
					
					<view class="icon you" @click="changeSchoolYear(1)" v-if="keyIndex!=-1&&keyIndex<(schoolYearkey.length-1)">
						<uni-icons color="#7f7f7f" size="40rpx" type="forward"></uni-icons>
					</view>
					<view class="" v-if="curYearKey == k || curYearKey == ''">
					<!-- {{JSON.stringify(cals)}} -->
						<view class="item" v-for="(item, i) in cals" :key="i">
							<text class="num">{{i+1}}</text>
							<text class="grade">{{all_class_list[item.clasId]}}</text>
							<view class="line">
								<view class="fill" :style="{width: i==0?'100%':`${parseFloat(item.sumScore/cals[0].sumScore*100)}%`}"></view>
							</view>
							<text class="score">{{item.sumScore}}</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="xd-box-shadow example-data">
			<view class="title">
				重要他人领域分布
			</view>
			<view class="">
				<qiun-data-charts 
					type="radar"
					:opts="radarOpts"
					:chartData="chartData"
					tooltipFormat="tooltipDemo2"
				/>
			</view>
		</view>
	</view>
	<uni-transition mode-class="fade"
		:styles="utils.transitionStyles.bg" :show="select_date" @click="closePopup">
	</uni-transition>
	<uni-transition :mode-class="['slide-bottom']"
		:styles="select_class"
		:show="select_date">
		<view class="show-date">
			<date-picker @onCancel="closePopup" @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate" :defaultValue="defaultPickerDate">
				
			</date-picker>
		</view>
	</uni-transition>
	 <uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose"  mode="input" :title="this.currentItem.name" value=""
			placeholder="请输入缺勤说明" @confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
</view>
</template>
<script>
import datePicker from '@/components/date-picker/date-picker.vue'
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
import uniPopup from "@/components/uni-popup/uni-popup"
import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog"
export default {
	components: {
		uniPopupDialog,
		uniPopup,
		datePicker,
		uniNavBar
	},
    data() {
        return {
					orgGraders: {},
			baseInfo: getApp().globalData.baseInfo,
			userInfo: {},
			tabValue:{},
			tabActive: 0,
			studentText: '',
			tabs: ['每日', '每周', '每月'],
			activeI: 0,
			chartsDataPie: {
				series: []
			},
            chartsDataLine: {
                "categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                "series": [],
            },
			opts: {
				extra: { 
					tooltip: { 
						tooltipArr: [
							[ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容1",color:null } ] , 
							[ { text:"不显示左侧颜色块",color:null }, { text:"自定义内容2",color:null } ]
						] 
					} 
				}
			},
			tooltipCustom:{
				x:10,
				y:10,
				index:2,
				textList:[{text:"自定义文字",color:"#EE6666"}],
			},
			show_charts: false,
			exhibitionAll: {},

			class_list: {},
			clas_id_list: [],
			currentClasInx: -1,
			cur_option: '',
			cur_class_id: -1,
			all_class: {},
			search_result: [],
	
			pageI: 1,
			maxPage: 0,

			chartData: {},
			schoolYearData: {},
			all_class_list: {},
			schoolYearkey: [],
			keyIndex: -1,
			curYearKey: '',
			
			radarOpts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [5,5,5,5],
				dataLabel: false,
				legend: {
					show: false
				},
				extra: {
					radar: {
						gridType: "radar",
						gridColor: "#CCCCCC",
						gridCount: 3,
						opacity: 0.2,
						max: 200,
						border: true
					},
					tooltip: { 
						tooltipArr: [
						] 
					} 
				},
			},
			select_class: {
				position: 'fixed',
				/* #ifdef H5 */
				left: 'var(--window-left)',
				right: 'var(--window-right)',
				/* #endif */
				/* #ifndef H5 */
				left: 0,
				right: 0,
				/* #endif */
				bottom: '0',
				height: '670rpx',
				'z-index': 9
			},
			year_list: [2022],
			startDate: "2018-05-02",
            endDate: "2030-12-31",
			defaultPickerDate: '',
			pickerDate: '',
			select_date: false,
			currentItem: {},
			
			curPage : 1
		} 
	},
	onShow() {
        // #ifdef H5
			this.utils.showRedDot()
		// #endif
		this.initTabValue()
		this.changeGroup(this.tabActive)
	},
	onLoad() {
		this.year_list = [2022]
		let currentMon = new Date().getMonth(),
		currentYear = new Date().getFullYear(),
		yearIndex = -1;
		
		if(currentYear>2022){// 可选择的年份
			for(let i=1; i<=(currentYear-2022); i++){
				let y = 2022+i
				this.year_list.push(y)
			}
		}
		
		yearIndex = this.year_list.indexOf(currentYear)

		if(!getApp().globalData.isStudent){
			this.utils.setTTabBar()
		}

		let today = this.utils.initDateDay();
        this.pickerDate = today;
		this.endDate = today
        this.defaultPickerDate = today
		
	},
	methods: {
		initTabValue(){
			this.userInfo = getApp().globalData.userInfo;
			if(!this.userInfo.id)return;
			let stratum = this.userInfo.stratum
			if(stratum==3){
				this.tabValue = {0: '组内成员', 1: '班级成员'}
			}else if(stratum == 1||stratum == 2){
				this.tabValue = {0: '组内成员', 1: '班级成员', 2: '年级成员'}
			}
		},
		changeGroup(i){
			this.tabActive = i;
			if(i==0){
				this.getExhibitionStudent()
			}else if(i == 1){
				this.search_result = []
				this.getFindStduents(1);
			}else if(i == 2){
				this.getfindGradeInfo()
			}
		},
		searchInput(eve){
			this.studentText = eve.detail.value;
		},
		getExhibitionStudent(){
			
			let date = new Date();
			let Mon = date.getMonth()+1;
			Mon = Mon>9?Mon:`0${Mon}`;
			let day = date.getDate();
			day = day>9?day:`0${day}`
			let currentDate = date.getFullYear()+'-'+Mon+'-'+day;
			this.api.get('tStudent/exhibitionStudent', {
				date: currentDate
			}).then(res=>{
				if(res.data.state!='ok') return;
				const exData = res.data || {}
				this.exhibitionAll = exData;
				this.$set(this.chartsDataLine, 'series', exData.lineChartList)
				// this.$set(this.chartsDataPie, 'series', [{data: exData.day}])
				let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
				for(let i=0; i<newOrgGraders.length; i++){
					Object.assign(this.orgGraders, newOrgGraders[i])
				}
				this.initTabValue()
				this.$nextTick(()=>{
					this.baseInfo = getApp().globalData.baseInfo;
				})
			})
		},
		echartsClick(params){
			// console.log('点击数据', params)
		},
		tooltipDemo(item, category, index, opts){
			return 'item.data'
		},
		changeTab(i){
			this.activeI = i;
			let type = i==0?'day':i==1?'week':'month'
			
			// this.$set(this.chartsDataPie, 'series', [{data: this.exhibitionAll[type]}])
		},
		getFindStduents(page){
			let orgGrades = this.baseInfo.newOrgGraders;
			let frameworkPermission = this.userInfo.frameworkPermission
			let clasIdList = this.userInfo.clasIdList || []
			this.clas_id_list = clasIdList
			let classList = compare(orgGrades, frameworkPermission)
			for(let i=0; i<classList.length; i++){
				Object.assign(this.class_list, classList[i])
			}
			// console.log(371, this.userInfo)

			this.cur_class_id = clasIdList.length>0?clasIdList[0]:frameworkPermission[0]
			this.cur_option = this.class_list[this.cur_class_id]
			// console.log(372, this.class_list, this.cur_class_id, this.cur_option)
			function compare(arr1, arr2){ // 删选出所拥有的的班级
				return arr1.filter((v)=>{
					return arr2.indexOf(parseInt(Object.keys(v)[0]))!=-1
				})
			}
			if(this.cur_class_id){
				this.getStduents(this.cur_class_id, page)
			}
			
			return

		},
		getStduents(clasId, page){
			this.currentClasInx = this.clas_id_list.indexOf(parseInt(clasId))
			this.pageI = page;
			this.api.get('tGradeClass/findStduentsPage', {
				page: page,
				limit: 10,
				date: this.pickerDate,
				clasId: clasId
			}).then(res=>{
				let data = res.data;
				if(data.state == 'ok'){
					this.$set(this.all_class, clasId, data[clasId])
					// this.students[clasId] = data.list
				}
			})
		},
		getfindGradeInfo(){
			let orgGrades = this.baseInfo.newOrgGraders;
			for(let i=0; i<orgGrades.length; i++){
					Object.assign(this.all_class_list, orgGrades[i])
				}
			this.api.get('tGradeClass/findGradeInfo').then(res=>{
				if(res.data.state == 'ok'){
					let data = res.data;
					this.getServerData(data.domain);
					let yearData = data.schoolYearData;
					for (const key in yearData) {
						if (yearData[key].length==0) {
							delete yearData[key]
							
						}
					}
					this.schoolYearData = yearData;
					this.schoolYearkey = Object.keys(yearData);
					if(this.schoolYearkey.length>1){
						this.keyIndex = 0;
						this.curYearKey = this.schoolYearkey[0]
					}
				}
				
				
			})
		},
		changeSchoolYear(i){
			if(i==0){
				this.keyIndex--
			}else{
				this.keyIndex++
			}
			this.curYearKey = this.schoolYearkey[this.keyIndex]
		},
		searchStudent(){
			
			if(!this.studentText){
				this.changeGroup(this.tabActive)
				return
			}
			this.api.get('tGradeClass/findStduentByName', {
				name: this.studentText,
				date:  this.pickerDate
			}).then(res=>{
				let data = res.data.students || [];
				this.search_result = data
				if(data.length==0){
					this.utils.showToast('无学生数据')
				}
				// if(Object.keys(data)[0]){
					
				// 	this.cur_class_id = Object.keys(data)[0];
				// 	this.cur_option = this.class_list[this.cur_class_id]
				// 	this.search_result = data[this.cur_class_id]
				// }
				
			})
		},
		getServerData(domain) {
			if(domain.length==0)return;
			let cate = [], data = [];
			for(let i=0; i<domain.length; i++){
				cate.push(domain[i].label)
				data.push(domain[i].count)
			}
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: cate,
					series: [
						{
							name: "",
							data: data
						}
					]
				};
				this.chartData = res;
		  }, 500);
		},
		
		comboxChange(index){
			// if(index==0 || index==1){
			// 	this.search_text = '';
			// 	this.getStudent()
			// }
			this.pageI = 1
			this.studentText = ''
			this.search_result = []
			this.cur_class_id = index;
			this.getStduents(index, 1)
		},
		// 教师提交缺勤记录
		submitAbsence(){
			if(this.pickerDate !=this.defaultPickerDate) return
			let fn = ()=>{
				this.api.post('tGradeClass/submitAbsence', {
					date: this.pickerDate,
					clasId: this.cur_class_id
				}).then(res=>{
					if(res.data.state != 'ok') return
					this.utils.showToast('提交成功')
				})
			}
			this.utils.showModal('','提交全班到场情况？', fn)
		},
		onConfirm(e){
            this.pickerDate = e.dateValue;
            this.closePopup();
            let date = e.dateValue.split('-');
            // this.showPickerDate = date[0]+'年'+date[1]+'月'+date[2]+'日';
            this.changeGroup(this.tabActive)
        },
		editAbsence(info){
			if(this.currentClasInx==-1){
				this.utils.showToast('只有班主任可以处理')
				return
			}
			if(this.pickerDate !=this.defaultPickerDate){
				// this.utils.showToast('只能修改今天的出勤状态')
				return
			}
			this.currentItem = info;
			if(info.absence){
				this.cancelAbsence()
				return
			}
			this.$refs.inputDialog.open()
		},
		cancelAbsence(){
			let fn = ()=>{
				this.api.post('tGradeClass/cancelStudentAbsence', {
					date: this.pickerDate,
					accountId: this.currentItem.accountId,
				}).then(res=>{
					if(res.data.state != 'ok') return
					this.utils.showToast('修改成功')
					this.$set(this.currentItem, 'absence', false)
					let obj = this.all_class[this.cur_class_id];

					this.$set(this.all_class, this.cur_class_id, obj)
				})
			}
			this.utils.showModal('','确认修改学生缺勤状态？', fn)
			
		},
		dialogInputConfirm(val) {
			
			if(!val){
				this.utils.showToast('缺勤原因不能为空')
				return
			}
			this.setAbsence(val)
			this.$refs.inputDialog.close()
		},
		setAbsence(val){
			this.api.get('tGradeClass/studentAbsence', {
				date: this.pickerDate,
				accountId: this.currentItem.accountId,
				reason: val
			}).then(res=>{
				if(res.data.state != 'ok') return
				let obj = this.all_class[this.cur_class_id];

				this.$set(this.currentItem, 'absence', true)
				this.$set(this.all_class, this.cur_class_id, obj)
				// this.currentItem.absence = true
				this.utils.showToast('提交成功')
			})
		},
		closePopup(){
			this.select_date = false
		}
	}
}
</script>
<style lang="less" scoped>
.home-index{
	position: relative;
	.h-top{
		padding-top: 50rpx;
		height: 134rpx;
		// #ifdef APP-PLUS
		padding-top: 90rpx;
		height: 164rpx;
		// #endif
		background-image: url('~@/static/u658_div.png');
		background-repeat: no-repeat;
		background-position: 0 0;
		background-color: #55acee;
		
		box-sizing: border-box;
		// color: transparent;
		.group-list{
			text-align: center;
			text{
				margin: 0 30rpx;
				color: #fff;
				font-size: 28rpx;
				&.active{
					font-weight: 700;
				}
			}
		}
	}
	.search-btn{
		margin: 36rpx 32rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
	}
	.search-box{
		// 
		height: 56rpx;
		border: 2rpx solid #f2f2f2;
		border-radius: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// color: #fff;
		padding-left: 20rpx;
		box-sizing: border-box;
		input{
			font-size: 26rpx;
			width: 80%;
		}
		.image{
			width: 56rpx;
			height: 56rpx;
			border-radius: 28rpx;
			background-color: #e9f4ff;
		}
		image{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.sign-btn{
		width: 146rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #169bd5;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
	}
}
    .data-home{
		box-sizing: border-box;
		overflow-y: scroll;
		padding: 40rpx 32rpx 0;
		.team-members{
			.students{
				padding: 20rpx 24rpx;
			}
			.student{
				overflow: hidden;
				margin-top: 24rpx;
				display: inline-block;
				width: 25%;
				text-align: center;
				font-size: 0;
				vertical-align: text-top;
			}
			.avatar-url{
				width: 70rpx;
				height: 70rpx;
				border-radius: 16rpx;
			}
			.name, .grade-cla{
				display: block;
				margin-top: 8rpx;
				font-size: 24rpx;
				white-space: nowrap;
			}
			.name{
				width: 159.6rpx;
			}
			.animation{
				display: inline-block;
				animation: noticeAnimation 5s linear 0s infinite;
			}
			@keyframes noticeAnimation {
				from {
					transform: translateX(159.6rpx);
				}
				to {
					transform: translateX(-100%);
				}
			}
			.grade-cla{
				color: #aaa;
			}
		}
		.charts-box{
			margin-bottom: 40rpx;
			width: 100%;
			// height:600rpx;
			box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, .35);
			border-radius: 10rpx;
			.change-tab{
				padding: 10rpx 48rpx;
				text{
					margin-right: 8rpx;
					border-radius: 8rpx;
					height: 32rpx;
					line-height: 32rpx;
					padding: 0 8rpx;
					background: #e4e4e4;
					font-size: 20rpx;
					&.active{
						background: #55acee;
						color: #fff;
					}
				}
			}
			.title{
				margin: 0 24rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 0 48rpx;
				font-size: 28rpx;
			}
		}
	}
	.class-members{
		margin: 32rpx 32rpx 0;
		.clas-grade{
			display: flex;
			align-items: center;
		}
		.select-filter{
			min-width: 140rpx;
			width: auto;
			border-bottom: 2rpx solid #f2f2f2;
			font-size: 26rpx;
		}
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 24rpx 12rpx 12rpx;
			.time{
				padding: 0 10rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background-color: #e9f4ff;
				font-size: 24rpx;
				color: #aaa;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				vertical-align: -10rpx;
				margin-left: 10rpx;
			}
		}
		.head{
			text{
				background-color: #555;
				height: 56rpx;
				line-height: 56rpx;
				color: #fff;
				&:last-child{
					border: none;
				}
			}
		}
		.head, .class-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			font-size: 24rpx;
			.number{
				display: none;
				width: 130rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.name{
				width: 252rpx;
				word-break: break-word;
			}
			.score{
				width: 252rpx;
				white-space: nowrap;
			}
			.is-login{
				width: 180rpx;
			}
		}
		.class-item{
			height: 80rpx;
			border-bottom: 2rpx solid  #f2f2f2;
		}
		.page{
			text-align: right;
			padding: 40rpx 18rpx 32rpx;
			margin-bottom: 24rpx;
			text{
				display: inline-block;
				margin-right: 16rpx;
				height: 32rpx;
				line-height: 32rpx;
				width: 32rpx;
				border-radius: 10rpx;
				text-align: center;
				background-color: #d7d7d7;
				color: #fff;
				font-size: 24rpx;
				&.active{
					background-color: #55acee;
				}
			}
		}
	}
	.grade-members{
		margin: 40rpx 32rpx;
		.title{
			padding: 24rpx 24rpx 12rpx 40rpx;
			border-bottom: 2rpx solid #f2f2f2;
		}
		
		.ranking{
			.list{
				padding: 32rpx 0 40rpx;
				position: relative;
				.icon{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: 64rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					background-color: #f2f2f2;
					text-align: center;
				}
				.zuo{
					left: 0;
					
				}
				.you{
					right: 0;
				}
			}
			.item{
				margin-bottom: 8rpx;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.num{
				display: inline-block;
				width: 30rpx;
				text-align: right;
				white-space: nowrap;
				margin-right: 16rpx;
			}
			.grade{
				display: inline-block;
				width: 104rpx;
				white-space: nowrap;
			}
			.score{
				display: inline-block;
				width: 42rpx;
				white-space: nowrap;
			}
			.line{
				margin: 0 16rpx;
				width: 342rpx;
				background-color: #212845;
				height: 10rpx;
				.fill{
					height: 10rpx;
					width: 0;
					background: linear-gradient(90deg, rgba(215, 215, 215, 1) 0%, rgba(85, 172, 238, 1) 0%, rgba(129, 211, 248, 1) 50%, rgba(2, 167, 240, 1) 99%, rgba(2, 125, 180, 1) 100%);
				}
			}
		}
		.example-data{
			margin-top: 40rpx;
		}
	}
</style>